<template>
  <div>
    <Header></Header>

    <van-grid :gutter="10">
      <van-grid-item icon="photo-o" text="文字" to="/" />
      <van-grid-item icon="photo-o" text="文字" to="/" />
      <van-grid-item icon="photo-o" text="文字" to="/" />
      <van-grid-item icon="photo-o" text="文字" to="/" />
    </van-grid>
    <div class="box">
        <h4 style="font-family:微软雅黑;">学堂精选</h4>
        <router-link to="/map">我的课程</router-link>
        </div>

        <van-swipe
         class="swipe" :autoplay="3000" 
         indicator-color="white" 
         width="200" height="200">
         
  <van-swipe-item class="vanSwipe">1</van-swipe-item>
  <van-swipe-item class="vanSwipe">2</van-swipe-item>
  <van-swipe-item class="vanSwipe">3</van-swipe-item>
  <van-swipe-item class="vanSwipe">4</van-swipe-item>
  <van-swipe-item class="vanSwipe">5</van-swipe-item>
  <van-swipe-item class="vanSwipe">6</van-swipe-item>
  <van-swipe-item class="vanSwipe">7</van-swipe-item>
  <!-- <van-swipe-item class="vanSwipe">1</van-swipe-item> -->

  

</van-swipe>
<!-- <template v-for="x in results"> -->
<div>
<van-tabs >
  <van-tab v-for="x in data" :title="x.xuanxiang" :key="x.xid" :to='`/dis?id=${x.xid}`' :onchange="x.xid">
   {{x.xid}}
    <div class="distribution"><router-link to="/">=</router-link></div>
  </van-tab>
</van-tabs>
<!-- // </template> -->
</div>

 <router-view />
  </div>
  
</template>



<script>

import Header from "@/components/Header.vue";
export default {
  components: {
    Header,
  },
   data() {
    return {
      data: null,
      xid:[],
    }

  },
  activated(){
    
  },
  mounted () {
    
    // let id = this.$route.query.id
    this.axios.get('http://localhost:3000/user/findAll').then(res=>{
      console.log(res.data[0].xid)
      this.data = res.data
      this.data.forEach(item =>{
         this.xid.push(item.xid)
      })
      
      // console.log(res.data.xid)

    })

  },
  watch: {
   $route(to, form) {
      console.log(to)
    }
  },
  
};
</script>

<style lang="scss" scoped>
.box{
    display: flex;
    justify-content: space-between;
    margin: 0 20px;
    >a{
        margin-top: 20px;
        color: rgb(142, 142, 142);
        
    }
}

.swipe .vanSwipe{
    // color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    // margin-left: 20px;
   
    
  }




.Van{
    background-color: white;
    // z-index: 99;
    width: 85%;
    >.van-swipe-item{
      display: none;
      >.van-swipe__indicator{
        display: none;
      }
    }
    
}
.van-swipe__indicators{
  display: none;
}
.van-swipe-item{
    font-family: '微软雅黑';
}

.distribution{
  position: relative;
  width: 40px;
  height: 20px;
  background-color: white;
  top: -30px;
  left: 335px;
  font-size: 30px;
  line-height: 20px;
  
  // z-index: 99;
}
.van-swipe__indicator--active{
  color: white;
  display: none;
}

.van-tabs--line .van-tabs__wrap{
  position: relative;
}
.distribution[data-v-9ea40744]{
  position: absolute;
  top: 12px;
}
.van-tabs__content{
  display: block;
  height: 300px;
}
</style>
